<template>
  <div class="category-container">
    <van-tree-select
      :height="scrollerHeight"
      :items="firstTypeList"
      @click-nav="navClick"
      :main-active-index.sync="firstTypeSelectIndex">
      <div slot="content" class="content">
        <div class="childBox">
          <div class="childItem" v-for="(childItem, childIndex) in secondTypeList" :key="childIndex">
            <h2><van-icon name="diamond-o" />{{childItem.name}}</h2>
            <ul>
              <li v-for="(item, index) in childItem.childList" :key="index" @click="$router.push('/search')">
                <div class="logo">
                  <img :src="item.logo" alt=""/>
                </div>
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </van-tree-select>
  </div>
</template>

<script>
import goodsListApi from '@/api/goodsApi'
import cache from '@/utils/cache'
import constants from '@/config/constants'

export default {
  name: 'category',
  computed: {
    scrollerHeight: function() {
      return window.innerHeight - 55;
    }
  },
  data () {
    return {
      /* 一级分类选中索引 */
      firstTypeSelectIndex: 0,
      /* 一级分类列表 */
      firstTypeList: [],
      /* 二级分类类别 */
      secondTypeList: [],
    }
  },
  created () {
    /* 获取左侧分类列表 */
    this.loadFirstGoodsTypeList();
  },
  methods: {
    /* 获取一级分类 */
    loadFirstGoodsTypeList () {
      goodsListApi.goodsTypeList(0).then(result => {
        if(result.code == constants.SUCCESS){
          result.data.forEach(item => {
            this.firstTypeList.push({id: item.id,text: item.name})
          })
          this.loadSecondGoodsTypeList(result.data[0].id);
        }
      })
    },
    /* 获取二级分类 */
    loadSecondGoodsTypeList (pid) {
      var data = cache.sessionGet(constants.CACHE.GOODS_TYPE_LIST+pid);
      if(data){
        this.secondTypeList = data;
      }else{
        goodsListApi.goodsTypeList(pid).then(result => {
          if(result.code == constants.SUCCESS){
            cache.sessionSet(constants.CACHE.GOODS_TYPE_LIST+pid, result.data);
            this.secondTypeList = result.data;
          }
        })
      }
    },
    /* 选择一级分类事件 */
    navClick (index) {
      this.loadSecondGoodsTypeList(this.firstTypeList[index].id);
    }
  }
}
</script>

<style lang="scss">
.category-container{
  .van-tree-select{
    .van-sidebar{
      width: 85px;
      flex: none;
      .van-tree-select__nav-item{
        padding: 0;
        .van-sidebar-item__text{
          padding: 15px 15px 15px 15px;
          margin: 5px 0px;
          font-size: 13px;
        }
      }
      .van-sidebar-item--select{
        .van-sidebar-item__text{
          background: #e6b873;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          color: #fff;
        }
      }
    }
    .van-tree-select__content{
      flex: 1;
      padding-bottom: 30px;
    }
  }
  .content .childBox{
    .childItem{
        display: flex;
        flex-direction: column;
        h2{
            display: flex;
            align-items: center;
            height: 36px;
            margin-left: 10px;
            font-size: 13px;
            color: #333;
            .van-icon{
              position: relative;
              top: 1px;
              margin-right: 3px;
              font-size: 15px;
              color: #333;
            }
        }
        ul{
            display: flex;
            flex-flow: wrap;
            padding-left: 10px;
            li{
                flex: 0 0 33.3333%;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: center;
                margin-bottom: 10px;
                span{
                    color: #666;
                    font-size: 12px;
                    word-break:break-all;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
                .logo{
                    padding: 0px 25px 5px 25px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
  }
}
</style>
